<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>推荐</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            height: 75px;
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            text-align: left;
            background-color: #FBB40E;
            border-bottom: 1px solid #fff;
            z-index: 999;
        }

        header .head {
            margin-top: 38px;
            color: #fff;
            text-align: center;
        }

        main {
            padding-top: 75px;
        }

        .famous {
            width: 25%;
            margin: 1rem;
            color: #fff;
            padding: 0.3rem 0.5rem;
            background-color: #292641;
            border-radius: 0.35rem;
        }

        .famous img {
            margin-right: 0.2rem;
            width: 2rem;
            height: 2rem;
            vertical-align: middle;
        }

        .selected {
            width: 20%;
            font-size: 1.2rem;
            padding: 0.5rem;
            color: orange;
            border-radius: 0.35rem;
            margin-left: 1rem;
            margin-bottom: 1rem;
        }

        .content {
            width: 95%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .content .content-item {
            position: relative;
            width: 47%;
            text-align: left;
            margin-bottom: 1rem;
            border-radius: 0.35rem;
            background-color: #fff;
            text-align: center;
            overflow: hidden;
        }

        .content-item .bg {
            width: 100%;
            height: 7rem;
        }
        .content-item img {
            position: absolute;
            top: 0;
            right: 0;
            width: 2rem;
            height: 2rem;
        }
        .content-item .text {
            color: #678;
            margin: 0.5rem 0;
        }

        .kfc .bg {
            background: url(../image/shop/kfc.png);
            background-size: cover;
        }

        .sf .bg {
            background: url(../image/shop/sf.png);
            background-size: cover;
        }

        .elm .bg {
            background: url(../image/shop/elm.png);
            background-size: cover;
        }

        .lppz .bg {
            background: url(../image/shop/lppz.png);
            background-size: cover;
        }

        .yyk .bg {
            background: url(../image/shop/yyk.png);
            background-size: cover;
        }

        .tm .bg {
            background: url(../image/shop/tm.png);
            background-size: cover;
        }

        .scroll {
            width: 100%;
            overflow-x: scroll;
            margin-bottom: 1rem;
        }

        .scroll-c {
            white-space: nowrap;
        }

        .scroll-c .scroll-c-item {
            display: inline-block;
            width: 40%;
            text-align: left;
            background-color: #fff;
            border-radius: 0.35rem;
            margin-left: 1rem;
            margin-right: 0.5rem;
            margin-bottom: 1rem;
        }

        .scroll-c .scroll-c-item-pic {
            width: 100%;
            height: 6rem;
            background: url(../image/shop/shop1.png);
            background-size: cover;
        }

        .scroll-c .scroll-c-item-bottm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            font-size: 0.9rem;
            margin: 0.5rem 0;
        }

        .scroll-c-item-bottm .jobname {
            width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
            margin-left: 0.3rem;
        }
        .scroll-c-item-bottm .address {
            margin-right: 0.3rem;
        }
    </style>
</head>

<body>
    <header>
        <div class="head">
            <span>推荐</span>
        </div>
    </header>
    <main>
        <div class="famous">
            <img src="../image/icon/105.png" alt="">名企推荐
        </div>
        <ul class="content">
            <li class="content-item kfc" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">肯德基</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
            <li class="content-item sf" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">顺丰</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
            <li class="content-item elm" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">饿了么</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
            <li class="content-item lppz" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">良品铺子</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
            <li class="content-item yyk" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">优衣库</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
            <li class="content-item tm" page-address="parttimetype.html">
                <div class="bg"></div>
                <div class="text">天猫</div>
                <img src="../image/icon/tuijian.png" alt="">
            </li>
        </ul>
        <div class="selected">小编精选</div>
        <div class="scroll">
            <div class="scroll-c">

            </div>
        </div>

    </main>
</body>
<script type="text/template" id="job">
    {{~it.items:value:index}}
    <div class="scroll-c-item" data-id="{{=value.id}}">
        <div class="scroll-c-item-pic"></div>
        <div class="scroll-c-item-bottm">
            <span class="jobname">{{=value.jobname}}</span>
            <span class="address">{{=value.address}}</span>
        </div>
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/jquery-1.11.3.min.js" charset="utf-8"></script>
<script src="../script/doT.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        getSelected();
    };

    function getSelected() {
        api.ajax({
            url: 'http://122.112.138.133/wangt/jianzhi/querySelectedJob.com',
            method: 'post',
            data: {
                body: {}
            }
        }, function(ret, err) {
            if (ret) {
                $('.scroll-c').append(parttime_render('job', ret.data.records));
                $('.scroll-c-item').click(function() {
                    api.openWin({
                        name: 'jobdetails',
                        url: './jobdetails.html',
                        pageParam: {
                            id: $(this).attr('data-id')
                        }
                    });
                })
            }
        });
    }

    $(".content-item").click(function() {
        var page_path = $(this).attr("page-address");
        if (page_path) {
            api.openWin({
                name: page_path.split(".")[0],
                url: page_path,
                bounces: false,
                pageParam: {
                    title: $(this).find('.text').text()
                }
            })
        }
    })

    function parttime_render(id, elements, options) {
        var options = options || {};
        var elementObj = doT.template($api.byId(id).innerHTML);
        var elementData = $.extend({
            items: elements
        }, options);
        return elementObj(elementData);
    }
</script>

</html>
